<template>
  <h1>TestLifeCycle</h1>
  <h2>F12 or Ctrl+Shift+I</h2>
  <div>
    <button @click="counter += 1">+1</button> <span>{{ counter }}</span>
  </div>
</template>

<script>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered
} from 'vue'

export default {
  name: "TestLifeCycle",
  setup() {
    // Vue3 的生命周期钩子写在 setup 里，并且需要按需引入
    // 比 Vue2 的钩子早执行
    console.log('setup')

    onBeforeMount(() => {
      console.log('onBeforeMount')
    })

    onMounted(() => {
      console.log('onMounted')
    })

    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })

    onUpdated(() => {
      console.log('onUpdated')
    })

    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })

    onUnmounted(() => {
      console.log('onUnmounted')
    })

    onErrorCaptured(() => {
      console.log('onErrorCaptured')
    })

    onRenderTracked((evt) => {
      console.log('onRenderTracked', evt)
    })

    onRenderTriggered((evt) => {
      console.log('onRenderTriggered',evt)
    })

    const counter = ref(1)

    return {
      counter
    }
  },
  // 兼容 Vue2 的生命周期写法
  // 两种写法不要混用
  // beforeCreate() {
  //   console.log('>>> beforeCreate')
  // },
  // created() {
  //   console.log('>>> created')
  // },
  // beforeMount() {
  //   console.log('>>> beforeMount')
  // },
  // mounted() {
  //   console.log('>>> mounted')
  // },
  // beforeUpdate() {
  //   console.log('>>> beforeUpdate')
  // },
  // updated() {
  //   console.log('>>> updated')
  // },
  // beforeUnmount() {
  //   console.log('>>> beforeUnmount')
  // },
  // unmounted() {
  //   console.log('>>> unmounted')
  // },
  // errorCaptured() {
  //   console.log('>>> errorCaptured')
  // },
  // renderTracked() {
  //   console.log('>>> renderTracked')
  // },
  // renderTriggered() {
  //   console.log('>>> renderTriggered')
  // },

}
</script>

<style scoped>

</style>
